<template>
  <div class="container1">
    <div class="top">
      <van-nav-bar
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>

    <div class="box1">

      <img src="https://img95.699pic.com/xsj/1p/mw/ks.jpg%21/fh/300">


      <div class="txt">
        <span>会员充值</span>
        <span style="color:#909399;font-size: 12px">淘宝下单获得16位随机码</span>
      </div>
      <div class="btn">
        <input type="text" placeholder="请输入兑换码" v-model="code">
        <button @click="change">兑换</button>
      </div>
      <span style="font-size: 12px;color:#909399;margin: 20px 0">如有疑问联系客服</span>
    </div>

  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref, onMounted, inject} from 'vue'
import {showDialog, showNotify} from "vant";

const axios = inject("axios")
const code = ref("")
const qq = ref("")
const router = useRouter();
onMounted(() => {
  qq.value = window.localStorage.getItem("qq")

})
const onClickLeft = () => {
  router.back()
}
// const change = () => {
//   axios.get('score/change').then(res => {
//     console.log(res.data)
//       showDialog({
//           title: '兑换成功',
//           message: res.data?.data,
//           theme: 'round-button',
//         }).then(() => {
//           router.back()
//         });
//
//   }).catch(err => {
//     console.log(err)
//     showNotify({type: 'danger', message: "网络异常"});
//   })

const change = () => {
  if (code.value.trim().length == 16) {
    axios.get('user/member?code=' + code.value + '&qq=' + qq.value).then(res => {
      if (res.data.code == 1) {
        showDialog({
          title: '兑换结果',
          message: res.data?.data,
          theme: 'round-button',
        }).then(() => {
          router.back()
        });
      } else showNotify({type: 'danger', message: res.data.msg});
    }).catch(err => {
      console.log(err)
      showNotify({type: 'danger', message: "网络异常"});
    })
  } else showNotify({type: 'danger', message: "请输入正确的租赁码"})
}

</script>

<style scoped lang="less">

.container1 {

  .top {
    width: 100%;
    margin: 0 auto;
  }

  .box1 {

    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    margin: 20px auto;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #ffffff;
    border: 1px solid transparent;

    img {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
    }

    .txt {
      font-size: 17px;
      color: black;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-weight: 700;

    }

    .btn {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 10px;

      input {
        flex: 1;
        height: 30px;
        font-size: 12px;
        background-color: #f2f2f2;
        border: none;

      }

      button {
        margin-left: 20px;
        width: 70px;
        height: 30px;
        font-size: 12px;
        background-color: #f2f2f2;
        border: none;
      }
    }
  }


}

</style>